/*
 * @Description: 借阅申请列表弹窗
 * @Author: Rfan
 * @Date: 2022-03-29 13:57:08
 * @LastEditTime: 2022-05-25 08:57:16
 */

import { Button, Input, Modal, Radio, Space, Table } from 'antd';
import classNames from 'classnames/bind';
import WithDialog from '@/components/WithDialog';

import styles from './styles/index.module.scss';

const cx = classNames.bind(styles);

const { Column } = Table;
const { Search } = Input;

const BorrowApplyDialogComp = (props: any) => {
  const { onOk } = props;

  const handleOk = () => {
    onOk(123);
    props.onCancel();
  };

  const onCancel = () => {
    props.onCancel();
  };

  return (
    <Modal
      title="借阅申请列表"
      visible
      onOk={handleOk}
      {...props}
      width={800}
      footer={[
        <div className={cx('footer-wrap')}>
          <Space>
            <Button key="back" onClick={onCancel}>
              {' '}
              关闭{' '}
            </Button>
            <Button key="back" onClick={onCancel}>
              通知领取
            </Button>
            <Button key="back" onClick={onCancel}>
              拒绝所选档案
            </Button>
            <Button key="submit" type="primary" onClick={handleOk}>
              将档案加入借阅
            </Button>
          </Space>
        </div>
      ]}
    >
      <div className={cx('apply-list')}>
        <div className={cx('apply-list__title')}>
          <h5>借阅申请列（已审核通过）</h5>

          <Search placeholder="" style={{ width: 200 }} />
        </div>

        <Table size="small">
          <Column title="序号"></Column>
          <Column title="标题"></Column>
          <Column title="申请人"></Column>
          <Column
            title="档案类型"
            render={() => (
              <>
                <Radio.Group>
                  <Radio value={1}>借阅</Radio>
                  <Radio value={2}>复制</Radio>
                </Radio.Group>
              </>
            )}
          ></Column>
          <Column title="利用目的"></Column>
          <Column title="数量"></Column>
          <Column title="备注"></Column>
          <Column title="审批通过时间"></Column>
        </Table>
      </div>
      <div className={cx('archive-list')}>
        <h5>
          申请档案列表
          <sub>选中要登记的借阅申请，可查看您可处理的申请档案信息</sub>
        </h5>
        <Table size="small">
          <Column title="序号"></Column>
          <Column title="档号"></Column>
          <Column title="题名"></Column>
          <Column title="档案类型"></Column>
          <Column
            title="实体利用"
            render={() => (
              <>
                <Radio.Group>
                  <Radio value={1}>借阅</Radio>
                  <Radio value={2}>复制</Radio>
                </Radio.Group>
              </>
            )}
          ></Column>
          <Column title="利用天数"></Column>
        </Table>
      </div>
    </Modal>
  );
};

const BorrowApplyDialog = (props: any) => new WithDialog(BorrowApplyDialogComp, props);
export default BorrowApplyDialog;
